<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <button @click="add">{{ count }}</button>
    <my-menu :routes = "routes"></my-menu>
  </div>
</body>
<script type="text/x-template" id="menu">
  <div>
    <ul>
      <li v-for="(item, index) of routes" :key="index">
        {{ item.title }}
        <!-- 一定要有条件为假的时候，否则进入无限死循环 -->
        <template v-if="item.children">
          <my-menu :routes="item.children"></my-menu>
        </template>
      </li>
    </ul>
  </div>
</script>
<!-- 一定要有条件为假的时候，否则进入无限死循环 -->
<!-- <template id="menu">
  <div>
    <ul>
      <li v-for="(item, index) of routes" :key="index">
        {{ item.title }}
        <template v-if="item.children">
          <my-menu :routes="item.children"></my-menu>
        </template>
      </li>
    </ul>
  </div>
</template> -->
<script src="lib/vue.js"></script>
<script>
  const Menu = {
    name: 'MyMenu', // 递归组件的核心
    props: {
      routes: Array
    },
    template: '#menu'
  }

  new Vue({
    el: '#app',
    methods: {
      add () {
        this.count++
        this.$forceUpdate() // 强制更新
      }
    },
    data: {
      count: 100,
      routes: [
        {
          title: '产品管理',
          children: [
            {
              title: '产品列表'
            },
            {
              title: '秒杀列表'
            },
            {
              title: '推荐'
            }
          ]
        },
        {
          title: '账户管理',
          children: [
            {
              title: '用户管理'
            },
            {
              title: '管理员管理',
              children: [
                {
                  title: '管理员列表'
                },
                {
                  title: '添加管理员'
                }
              ]
            }
          ]
        }
      ]
    },
    components: {
      MyMenu: Menu
    }
  })
</script>
</html>